<template>
	<div class="j-peripheral">
		<j-header :indexNum="5"></j-header>
		<div class="jc-banner"></div>
		<div class="nav-title">
			<div class="container clearfix">
				<div class="nav-text pull-left">外周血造血干细胞</div>
				<div class="nav-link pull-left">
					<router-link to="/">首页 </router-link>/
					<span>产品服务 </span>/
					<span>外周血造血干细胞 </span>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="module-title text-center">
				<span class="title-ch">外周血造血干细胞</span><br>
				<span class="title-en">PERIPHERAL BLOOD STEM CELLS</span>
			</div>
			<div class="jp-content">
				<div class="jp-item clearfix">
					<div class="jp-img"><img src="../../assets/product/st12.jpg" alt=""></div>
					<div class="jp-step">
						<p>
							<img src="../../assets/product/st01.png" alt="">
							<span>专业的医学健康评估</span>
						</p>
						<p>
							<img src="../../assets/product/st02.png" alt="">
							<span>注射细胞集落刺激因子（G-CSF或GM-CSF）</span>
						</p>
					</div>
				</div>
				<div class="jp-item clearfix">
					<div class="jp-img"><img src="../../assets/product/st34.jpg" alt=""></div>
					<div class="jp-step">
						<p>
							<img src="../../assets/product/st03.png" alt="">
							<span>在舒适的环境中收集造血干细胞，全程约3-4小时</span>
						</p>
						<p>
							<img src="../../assets/product/st04.png" alt="">
							<span>造血干细胞的制备和检测</span>
						</p>
					</div>
				</div>
				<div class="jp-item clearfix">
					<div class="jp-img"><img src="../../assets/product/st56.jpg" alt=""></div>
					<div class="jp-step">
						<p>
							<img src="../../assets/product/st05.png" alt="">
							<span>通过程控降温至-90℃后，再转入-196℃MVE气相液氮罐中储存</span>
						</p>
						<p>
							<img src="../../assets/product/st06.png" alt="">
							<span>按储户需求即用即取</span>
						</p>
					</div>
				</div>
			</div>
		</div>
		<j-footer></j-footer>
	</div>
</template>
<script>
import JHeader from '../../components/Header.vue'
import JFooter from '../../components/Footer.vue'
export default {
  components: {
    JHeader, JFooter
  }
}
</script>
<style rel="stylesheet/scss" type="text/scss" lang="scss" scoped>
	.j-peripheral{
		.clearfix{
			overflow: hidden;
		}
		.jc-banner {
			height: 150px;
			background: url(../../assets/banner/banner03.jpg) center top no-repeat;
		}
		.container{
			/*border: 1px solid red;*/
			.jp-content{
				padding: 0 40px;
				margin-bottom: 130px;
				.jp-item{
					margin-bottom: 20px;
					.jp-img{
						float: left;
						width: 42%;
						/*border: 1px solid blue;*/
						img{
							max-width: 100%;
						}
					}
					.jp-step{
						float: left;
						width: 58%;
						/*border: 1px solid blue;*/
						p{
							padding: 23px 0;
							margin: 0;
							span{
								margin-left: 10px;
							}
						}
					}
				}
			}
		}
	}
	@media screen and (max-width: 991px){
		.j-peripheral{
			.container{
				.jp-content{
					.jp-item{
						.jp-img{
							/*width: 100%;*/
							padding-right: 10px;
						}
						.jp-step{
							/*width: 100%;*/
							p {
								padding: 15px 0;
							}
						}
					}
				}
			}
		}
	}
	@media (max-width:767px){
		.j-peripheral{
			.container{
				.jp-content{
					padding: 0 10px!important;
					.jp-item{
						margin: 0;
						.jp-img{
							padding-right: 0;
							width: 100%;
						}
						.jp-step{
							width: 100%;
							margin: 15px 0;
							p{
								padding: 5px 0!important;
								img{
									width: 30px;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
